<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>百度联想词</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div class="search-wrap">
      <div class="input-wrap">
        <input type="text" class="search-input J_searchInput" />
      </div>
      <div class="list-wrap">
        <ul class="wd-list J_wdList"></ul>
      </div>
    </div>
    <script type="text/html" id="J_listTpl">
      <li class="wd-item">
        <a
          href="https://www.baidu.com/s?wd={{wdLink}}"
          target="_blank"
          class="wd-lk"
          >{{wd}}</a
        >
      </li>
    </script>
    <script>
      const oSearchInput = document.querySelector(".J_searchInput");
      const oListTpl = document.getElementById("J_listTpl");
      const oListWrap = document.querySelector(".list-wrap");
      let oScript = null;

      function fn(data) {
        let list = "";
        data.s.forEach((item, index) => {
          list += oListTpl.innerHTML.replace(/{{(.*?)}}/g, (node, key) => {
            return {
              wd: item,
              wdLink: item,
            }[key];
          });
        });
        oListWrap.innerHTML = list;
        if (!oSearchInput.value) {
          oListWrap.innerHTML = "";
        }
      }

      oSearchInput.onkeyup = function () {
        if (oScript) {
          oScript.remove();
        }
        const value = oSearchInput.value;
        oScript = document.createElement("script");
        oScript.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${value}&cb=fn`;
        document.body.appendChild(oScript);
        oListWrap.style.display = "block";
      };
    </script>
  </body>
</html>
